<template>
  <div  >
    <div id='board' style="width: 80vh;height: 80vh">
      <canvas
      id='drawingBoard'
      class="shadow"
      ></canvas>
    </div>
    
    <div>
      <el-button @click="deleteNode"></el-button>
    </div>
  </div>

</template>

<script setup>
import { init, setNode } from "@/home/common.js";
import { onMounted, ref } from "vue";

const width = 1400;
const height = 1000;
const defaultStyle = {
  lineWidth: 1,
};

let draw = null;
onMounted(() => {
  draw = init({ width, height, defaultStyle }, document.getElementById("drawingBoard"), (node) => clickNode(node));
  draw.addNode({
    type: "rect",
    id: 1,
    x: 100,
    y: 140,
    width: 90,
    height: 45,
    connect: true,
    level: 1,
    textInfo: {
      text: "事件1",
    },
  });
  draw.addNode({
    type: "rect",
    id: 2,
    x: 100,
    y: 300,
    width: 90,
    height: 45,
    level: 1,
    connect: true,
    textInfo: {
      text: "事件2",
    },
  });

  draw.addConnect({
    type: 'connectArrowCurveFill',
    fillColor: '#165dff',
    textInfo: {
      text: 'status',
      font: '15px MiSans',
    },
    startInfo: {
      id: 1,
      pos: 3,
    },
    targetInfo: {
      id: 2,
      pos: 1
    }
  })

  listenerDragScale();
  listenerDragPosition();
});


/** 当前点击的节点 */
const currentNode = ref({});
const clickNode = (node) => {
  console.log('current click', node);
  currentNode.value = node;
}

/** 删除节点 */
const deleteNode = () => {
  if(currentNode.value) draw.deleteNode(currentNode.value.id)
}

// 添加图案
const drawing = ref(false);

// 缩放控制
const listenerDragScale = () => {
  let scale = ref(1);
  let dom = document.getElementById("drawingBoard");
  document.getElementById("board").addEventListener("mousewheel", (val) => {
    setTimeout(() => {
      if (val.wheelDelta > 0) {
        // 放大
        scale.value += 0.01;
      } else {
        scale.value -= 0.01;
        if (scale.value < 0.5) scale.value = 0.5;
      }
      dom.style.transform = `scale(${scale.value})`;
    }, 10);
  });
};

// 拖拽控制
const listenerDragPosition = () => {
  let drag = ref(false);
  let dom = document.getElementById("drawingBoard");

  let startX = ref(0); // 记录每次鼠标点击的初始位置
  let startY = ref(0);

  let tagX = ref(0); // 暂存区，记录每次拖拽产生的 x/y 方向上的变化
  let tagY = ref(0);

  let posX = ref(0); // 记录画布实际移动的位置
  let posY = ref(0);

  document.getElementById("board").addEventListener("mousedown", (val) => {
    tagX.value = 0;
    tagY.value = 0;
    let node = draw.getNode();
    if (JSON.stringify(node) === "{}" && !drawing.value) {
      // 选中图案时禁止拖拽（会和图案的拖拽冲突）
      drag.value = true;
      startX.value = val.clientX;
      startY.value = val.clientY;
    }
  });

  document.getElementById("board").addEventListener("mouseup", () => {
    posX.value += tagX.value;
    posY.value += tagY.value;
    drag.value = false;
    dom.style.left = posX.value + "px";
    dom.style.top = posY.value + "px";

    drawing.value = false;
    setNode(null);
  });

  document.getElementById("board").addEventListener("mousemove", (val) => {
    if (drag.value) {
      let subX = val.clientX - startX.value;
      let subY = val.clientY - startY.value;

      tagX.value = subX;
      tagY.value = subY;

      dom.style.left = tagX.value + posX.value + "px";
      dom.style.top = tagY.value + posY.value + "px";
    }
  });
};
</script>

<style scoped>
#board {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 600px;
  margin-top: 20px;
  background: rgb(245, 245, 245);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
#drawingBoard {
  position: absolute;
  left: 0px;
  top: 0px;
}
</style>